import React, { useEffect, useState, useRef } from 'react';
import styles from './index.less';
import { queryIndexBanner, getIndexRecommend } from '@/services';
import { SwiperBox, Picture, Message, Icon } from '@/design';
import Scroll from '@/components/Scroll/Scroll';
import moment from 'moment';

type IRecommend = {
  id: number;
  image: string;
  content: string;
  avatar: string;
  author: string;
  createTime: string;
};

const PIndex: React.FC = () => {
  const INDEX_NAV = [
    { icon: 'icon-tequanguanli', name: '積分商家', link: '#' },
    { icon: 'icon-qiandao', name: '簽到', link: '#' },
    { icon: 'icon-yemianzhuangxiu', name: '附近好物', link: '#' },
    { icon: 'icon-youhuiquan', name: '搜優惠', link: '#' },
    { icon: 'icon-miaosha', name: '9.9專區', link: '#' },
  ];

  const [loading, setLoading] = useState<boolean>(false);
  const [banners, setBanners] = useState<[]>([]);
  const [recommends, setRecommends] = useState<IRecommend[]>([]);
  const swiperRef = useRef<HTMLDivElement>(null);
  const [pageNo, setPageNo] = useState<number>(0);

  // 查詢banner
  const fetchIndexBanner = async () => {
    setLoading(true);
    let result = await queryIndexBanner();
    setLoading(false);
    // console.log(result)
    setBanners(result.data);
  };

  // 查詢推薦
  const fetchIndexRecommend = async () => {
    let result = await getIndexRecommend();
    let newList = result.data.list || [];
    // console.log(newList.filter((_, index) => index % 2 === 0))

    setRecommends(recommends => [...recommends, ...newList]);
    setPageNo(pageNo => ++pageNo);
  };

  // 渲染推荐项
  const renderRecommendItem = (item: IRecommend, index: number) => {
    return (
      <div className={styles.item} key={item.id}>
        <Picture className={styles.pic} src={item.image} />
        <p className={styles.cont}>{item.content}</p>
        <div className={styles.user}>
          <Picture className={styles.avatar} src={item.avatar} />
          <span className={styles.author}>{item.author}</span>
          <span className={styles.date}>
            {moment(moment(item.createTime)).fromNow()}
          </span>
        </div>
      </div>
    );
  };

  useEffect(() => {
    fetchIndexBanner();
    fetchIndexRecommend();
  }, []);

  return (
    <>
      <Scroll
        hasMore={true}
        hasFooter
        config={{ scrollY: true, pullDownRefresh: true, pullUpLoad: true }}
        onPullingUp={fetchIndexRecommend}
        // onPullingDown={(done) => { console.log('下拉刷新'); done() }}
      >
        <div className={styles.banner_holder} ref={swiperRef}>
          <SwiperBox
            ikey="id"
            data={banners}
            wrapClass={styles.index_banner}
            dotsClass={styles.banner_dots}
            renderRow={(item: { image: string }, index: number) => (
              <Picture
                setRef={swiperRef.current}
                className={styles.banner_item}
                key={index}
                src={item.image}
              />
            )}
          />
        </div>
        <div className={styles.index_main}>
          <div className={styles.index_navList}>
            {INDEX_NAV.map((item, index) => (
              <div key={index} className={styles.item}>
                <Icon className={styles.icon} name={item.icon} />
                <p>{item.name}</p>
              </div>
            ))}
          </div>
          <div className={styles.index_operation}>
            <button type="button" className={styles.item}>
              <h3>發票兌獎</h3>
              <p>Invoice cash award</p>
              <Icon className={styles.icon} name="icon-fapiao" />
            </button>
            <button type="button" className={styles.item}>
              <h3>掃碼付款</h3>
              <p>Scan code payment</p>
              <Icon className={styles.icon} name="icon-fukuan" />
            </button>
          </div>
          <div className={styles.waterfall}>
            {/* 左列 */}
            <div className={styles.colum}>
              {recommends
                .filter((_, index) => index % 2 === 0)
                .map(renderRecommendItem)}
            </div>
            {/* 右列 */}
            <div className={styles.colum}>
              {recommends
                .filter((_, index) => index % 2 !== 0)
                .map(renderRecommendItem)}
            </div>
          </div>
        </div>
      </Scroll>
    </>
  );
};

export default PIndex;
